<template>
	<a-layout-sider :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
		 :collapsible="collapsible" v-model="collapsed" :trigger="null" >
		 
		<div style="background: #001529;">
		<img class="slogo" src="../../assets/timg.jpg"></img><span v-if="!collapsed" class="slogo">教务管理系统</span>
		</div>
		
		<a-menu :openKeys='openKeysMsg' mode="inline" @click="handleClick" @openChange="onOpenChange" theme="dark">
			<a-menu-item key="sub0">
				<a-icon type="pie-chart" />
				<span class="homePage">首页</span>
			</a-menu-item>
			<a-sub-menu :key="'sub'+index+1" @titleClick="titleClick" v-for="(item,index) in targetMenus" v-if="item.meta.title!=null
			&& kwglMenu[item.meta.title.trim()]!=null
			&& kwglMenu[item.meta.title.trim()] > 0">
				<span slot="title">
					<a-icon type="desktop" />
					<span>{{item.meta.title}}</span>
				</span>
				<a-menu-item v-for="(childItem,childIndex) in item.children"
					v-if="defalutShow == 1 || kwglChildMenu[childItem.meta.title.trim()]!=null"
					:key='"sub"+index+childIndex+1' @click="toPath(childItem)">
					<img align=absmiddle
						style="margin-top: -2px;margin-left: 6px;max-width: 20px;max-height: 20px;vertical-align:middle;"
						:src="iconImage[childItem.meta.title.trim()] == null ? defaultImage:iconImage[childItem.meta.title.trim()]" />
					{{childItem.meta.title}}
				</a-menu-item>
			</a-sub-menu>
		</a-menu>



		<!--0512菜单样式变更-->
		<!-- 旧菜单样式 -->
		<!-- <div v-if="item.meta.title!=null
    && kwglMenu[item.meta.title.trim()]!=null
    && kwglMenu[item.meta.title.trim()] > 0" v-for="(item,index) in targetMenus" style="width: 100%;"> -->
		<!-- 	kwglMenu[item.meta.title.trim()] == 2 &&
	@click="kwglMenu[item.meta.title.trim()] == 1 ? kwglMenu[item.meta.title.trim()] = 2:kwglMenu[item.meta.title.trim()] = 1" -->
		<!--    <p class="item_title_font" @click="nowMenu = item.meta.title.trim()">
        {{item.meta.title.trim()}}
        <span style="float: right;margin-right: 10px" @click="nowMenu = item.meta.title.trim()">
        <img style="width: 20px;height: 20px" :src="nowMenu == item.meta.title.trim() ? upArraw:downArraw"></span></p>
      <div v-show="item.children!=null && nowMenu == item.meta.title.trim()
      && kwglMenu[item.meta.title.trim()] == 1" style="width: 100%;display: flex; flex-flow: row wrap;">
        <div v-show="defalutShow == 1 || kwglChildMenu[childItem.meta.title.trim()]!=null"
             v-for="(childItem,childIndex) in item.children" class="item_children_div" @click="toPath(childItem)">
          <img align=absmiddle style="margin-top: -2px;margin-left: 6px;max-width: 20px;max-height: 20px;vertical-align:middle;"
               :src="iconImage[childItem.meta.title.trim()] == null ? defaultImage:iconImage[childItem.meta.title.trim()]"/>
          {{childItem.meta.title}}
        </div>
      </div>
    </div> -->

		<!--    <s-menu
    <!--      :collapsed="collapsed"
    <!--      :menu="menus"-->
		<!--      :theme="theme"-->
		<!--      @select="onSelect"-->
		<!--      :mode="mode"-->
		<!--      :style="smenuStyle">-->
		<!--    </s-menu>-->

	</a-layout-sider>

</template>

<script>
	import ALayoutSider from 'ant-design-vue/es/layout/Sider'
	import Logo from '../tools/Logo'
	import SMenu from './index'
	import {
		mixin,
		mixinDevice
	} from '@/utils/mixin.js'
	//是否启用按角色权限展示菜单
	const defalutShow = 1;
	export default {
		name: 'SideMenu',
		components: {
			ALayoutSider,
			Logo,
			SMenu
		},
		mixins: [mixin, mixinDevice],
		data() {
			return {
				defalutShow: defalutShow,
				//和次子系统有关的菜单
				nowMenu: '教学资源管理',
				kwglMenu: {
					'教学资源管理': defalutShow,
					'培养方案': defalutShow,
					'教学任务': defalutShow,
					'调课管理': defalutShow,
					'排课管理': defalutShow,
					'选课管理': defalutShow,
					'考务管理': defalutShow,
					'教学工作管理': defalutShow,
					// '基本设置': defalutShow,
					'学籍管理': defalutShow,
					'职业技能': defalutShow,
					'统计查询': defalutShow,
					// "系统管理":defalutShow,
					//  "在线开发":true,
				},
				kwglMenuSort: [
					'教学资源管理',
					'培养方案',
					'教学任务',
					'排课管理',
					'调课管理',
					'选课管理',
					'考务管理',
					'教学工作管理',
					'学籍管理',
					'职业技能',
					'统计查询',
					'基本设置',
					'系统管理',
				],
				kwglChildMenu: {},
				//和次子系统有关的图标
				iconImage: {
					'课程库管理': '/static/menuIcon/icon_kckgl.png',
					'教学场地管理': '/static/menuIcon/icon_jxcdgl.png',
					'教材管理': '/static/menuIcon/icon_jcgl.png',

					'竞赛管理': '/static/menuIcon/icon_jsgl.png',
					'职业认证管理': '/static/menuIcon/icon_zyrzgl.png',

					'工作总结': '/static/menuIcon/icon_gzzj.png',
					'授课计划': '/static/menuIcon/icon_skjh.png',
					'教学活动管理': '/static/menuIcon/icon_jxhdgl.png',
					'班级公告': '/static/menuIcon/icon_bjgg.png',
					'教学日志': '/static/menuIcon/icon_jxrz.png',

					'基础设置': '/static/menuIcon/icon_jcsz.png',
					'考试管理': '/static/menuIcon/icon_ksgl.png',
					'补考管理': '/static/menuIcon/icon_bkgl.png',
					'清考管理': '/static/menuIcon/icon_qkgl.png',
					'成绩管理': '/static/menuIcon/icon_cjgl.png',
					'成绩录入设置': '/static/menuIcon/icon_zyrzgl.png',

					'选课模式': '/static/menuIcon/icon_xkms.png',
					'学期选课时间': '/static/menuIcon/icon_xqxksj.png',
					'学生选课限制': '/static/menuIcon/icon_xsxkxz.png',
					'学生选课': '/static/menuIcon/icon_xsxk.png',

					'成绩查询': '/static/menuIcon/icon_cjcx.png',
					'考试查询': '/static/menuIcon/icon_kscx.png',


					'手动排课': '/static/menuIcon/icon_sdtk.png',
					'自动排课': '/static/menuIcon/icon_zdtk.png',
					'全校不排课时间': '/static/menuIcon/icon_qxbpksj.png',
					'排课节设置': '/static/menuIcon/icon_pkjsz.png',
					'排课参数配置': '/static/menuIcon/icon_tkcspz.png',
					'教师不排课时间': '/static/menuIcon/icon_jsbpksj_teacher.png',
					'教室不排课时间': '/static/menuIcon/icon_jsbpksj.png',

					'行政调课': '/static/menuIcon/icon_xztk.png',
					'调课审批': '/static/menuIcon/icon_tksp.png',
					'调课申请': '/static/menuIcon/icon_tksq.png',
					'我的调课记录': '/static/menuIcon/icon_wdtkjl.png',
					'调课统计': '/static/menuIcon/icon_tktj.png',

					'学生成绩统计': '/static/menuIcon/icon_xscjtj.png',
					'教师课时统计': '/static/menuIcon/icon_jskstj.png',
					'教学资源统计': '/static/menuIcon/icon_jxzytj.png',
					'课表查询': '/static/menuIcon/icon_kbtj.png',

					'培养方案': '/static/menuIcon/icon_pyfa.png',
					'课程计划': '/static/menuIcon/icon_kcjh.png',
					'选课计划': '/static/menuIcon/icon_xkjh.png',

					'班主任': '/static/menuIcon/icon_kcjh.png',
					'课程性质': '/static/menuIcon/icon_xkjh.png',

					'教学任务': '/static/menuIcon/icon_jxrw.png',
					'任课情况': '/static/menuIcon/icon_xkjh.png',
					'教学进度': '/static/menuIcon/icon_pyfa.png',

					'学籍注册': '',
					'学生信息维护': '',
					'审核学籍修改申请': '',
					'学籍异动': '',
					'学期注册': ''

				},
				//默认图标
				defaultImage: '/static/menuIcon/icon_kckgl.png',
				downArraw: '/static/menuIcon/down.png',
				upArraw: '/static/menuIcon/up.png',
				// 定义虚拟数组
				token: window.localStorage.getItem('token'),
				url: 'http://172.16.20.40:8080/student/#',
				ListData: [{
					'redirect': null,
					'path': '/iframe',
					'component': 'layouts/RouteView',
					'route': '1',
					'children': [{
						'path': '/iframe/xjzc',
						'component': 'iframe/xjzc/index',
						'route': '1',
						'meta': {
							'keepAlive': false,
							'internalOrExternal': false,
							'componentName': 'index',
							'title': '学籍注册'
						}
					}, {
						'path': '/iframe/xsxxwh',
						'component': 'iframe/xsxxwh/index',
						'route': '1',
						'meta': {
							'keepAlive': false,
							'internalOrExternal': false,
							'componentName': 'index',
							'title': '学生信息维护'
						}
					}, {
						'path': '/iframe/shxjxg',
						'component': 'iframe/shxjxg/index',
						'route': '1',
						'meta': {
							'keepAlive': false,
							'internalOrExternal': false,
							'componentName': 'index',
							'title': '审核学籍修改申请'
						}
					}, {
						'path': '/iframe/xjyd',
						'component': 'iframe/xjyd/index',
						'route': '1',
						'meta': {
							'keepAlive': false,
							'internalOrExternal': false,
							'componentName': 'index',
							'title': '学籍异动'
						}
					}, {
						'path': '/iframe/xqzc',
						'component': 'iframe/xqzc/index',
						'route': '1',
						'meta': {
							'keepAlive': false,
							'internalOrExternal': false,
							'componentName': 'index',
							'title': '学期注册'
						}
					}],
					'meta': {
						'keepAlive': false,
						'internalOrExternal': false,
						'icon': 'tags',
						'componentName': 'RouteView',
						'title': '学籍管理'
					}
				}],
				targetMenus: [],
				openKeysMsg: [],
				ascertain: 0,
			}
		},
		props: {
			mode: {
				type: String,
				required: false,
				default: 'inline'
			},
			theme: {
				type: String,
				required: false,
				default: 'dark'
			},
			collapsible: {
				type: Boolean,
				required: false,
				default: false
			},
			collapsed: {
				type: Boolean,
				required: false,
				default: false
			},
			menus: {
				type: Array,
				required: true
			}
		},
		created() {
			let menuObj = {}
			for (let i = 0; i < this.menus.length; i++) {
				menuObj[this.menus[i].meta.title.trim()] = this.menus[i]
			}
			console.log(menuObj, 'menuObj')
			//菜单重排序，且只取需要的菜单
			for (let i = 0; i < this.kwglMenuSort.length; i++) {
				if (menuObj[this.kwglMenuSort[i]] != null) {
					this.targetMenus.push(menuObj[this.kwglMenuSort[i]])
				}
			}
			this.token = window.localStorage.getItem('token')
			if (window.localStorage.getItem('menu') != null) {
				// console.log(menuList)
				var menuList = JSON.parse(window.localStorage.getItem('menu'))
				// let menuList = []
				menuList.concat(this.ListData)
				for (let i = 0; i < menuList.length; i++) {
					let childMenuList = menuList[i].childList
					this.kwglMenu[menuList[i].text] = 1
					if (childMenuList != null) {
						for (let j = 0; j < childMenuList.length; j++) {
							this.kwglChildMenu[childMenuList[j].text] = true
							if (childMenuList[j].iconcls.trim() != '') {
								this.iconImage[childMenuList[j].text] = '/static/menuIcon/' + childMenuList[j].iconcls
							}
						}
					}
				}
			}
		},
		computed: {
			smenuStyle() {
				let style = {
					'padding': '0'
				}
				if (this.fixSiderbar) {
					style['height'] = 'calc(100% - 59px)'
					style['overflow'] = 'auto'
					style['overflow-x'] = 'hidden'
				}
				return style
			}
		},
		methods: {
			onSelect(obj) {
				console.log(obj)
				this.$emit('menuSelect', obj)
			},
			toPath(item) {
				console.log(item)
				if (item.children != null) {
					this.$router.push({
						path: item.children[0].path
					})
					// console.log(item.path)
				} else {
					this.$router.push({
						path: item.path
					})
					// console.log(item.path)
				}
			},
			handleClick(e) {
				// console.log('click', e);
			},
			titleClick(e) {

			},
			onOpenChange(openKeys) {
				console.log(openKeys, 'openKeys!!!!!!')
				const latestOpenKey = openKeys.find(
					(key) => this.openKeysMsg.indexOf(key) === -1
				)
				if (latestOpenKey == undefined) {
					this.openKeysMsg = []
					return
				}
				if (this.openKeysMsg.indexOf(latestOpenKey) == -1) {
					this.openKeysMsg = [latestOpenKey]
				} else {
					this.openKeysMsg = latestOpenKey ? [latestOpenKey] : []
				}
			},
		}
	}
</script>
<style lang="less" scoped>
	/* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
	.sider {
		@scrollBarSize: 10px;
		
		
		.slogo {
			color: white;
			height: 32px;
			background: rgba(255, 255, 255, 0.2);
			margin: 13px;
		}
		.ant-menu-dark, .ant-menu-dark .ant-menu-sub{
			min-height: 90vh;
		}
		
		ul.ant-menu {

			/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

			&::-webkit-scrollbar {
				width: @scrollBarSize;
				height: @scrollBarSize;
				background-color: transparent;
				display: none;
			}

			& .-o-scrollbar {
				display: none;
			}

			/* 兼容IE */
			-ms-overflow-style: none;
			-ms-scroll-chaining: chained;
			-ms-content-zooming: zoom;
			-ms-scroll-rails: none;
			-ms-content-zoom-limit-min: 100%;
			-ms-content-zoom-limit-max: 500%;
			-ms-scroll-snap-type: proximity;
			-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);

			/* 定义滚动条轨道 */

			&::-webkit-scrollbar-track {
				background-color: transparent;
			}

			/* 定义滑块 */

			&::-webkit-scrollbar-thumb {
				border-radius: @scrollBarSize;
				background-color: #eee;
				box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);

				&:hover {
					background-color: #dddddd;
				}

				&:active {
					background-color: #bbbbbb;
				}
			}
		}

		/** 暗色系滚动条样式 */

		&.dark ul.ant-menu {
			&::-webkit-scrollbar-thumb {
				background-color: #666666;

				&:hover {
					background-color: #808080;
				}

				&:active {
					background-color: #999999;
				}
			}

			background-color: rgb(48, 65, 86);

			/deep/ .ant-menu-submenu-title:hover {
				background-color: #263445;
			}

			/deep/ .ant-menu-item:hover {
				background-color: #263445;
			}

			/deep/ .ant-menu-item-selected {
				background-color: #263445;
			}

			/deep/ .ant-menu-item-selected i {
				color: rgb(24, 144, 255);
			}

			/deep/ .ant-menu-item-selected span {
				color: rgb(24, 144, 255);
			}

			/deep/ .ant-menu-inline.ant-menu-sub {
				background-color: #1f2d3d;
			}

			/deep/ .ant-menu-inline.ant-menu-sub li:hover {
				background-color: #1f2d3d;
			}

			/deep/ .ant-menu-inline.ant-menu-sub .ant-menu-submenu-title:hover {
				background-color: #1f2d3d;
			}

			/deep/ .ant-menu-inline.ant-menu-sub .ant-menu-item-selected {
				background-color: #1f2d3d;
			}

			/deep/ .ant-menu-inline.ant-menu-sub .ant-menu-item-selected span {
				color: rgb(24, 144, 255);
			}

			/deep/ .ant-menu-inline.ant-menu-sub .ant-menu-item-selected i {
				color: rgb(24, 144, 255);
			}
		}
	}

	/* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
</style>

<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
<style lang="less">
	.ant-menu.ant-menu-root {
		&>.ant-menu-item:first-child {
			background-color: transparent;

			&>a,
			&>a:hover {
				color: rgba(0, 0, 0, 0.65);
			}

			&.ant-menu-item-selected {

				&>a,
				&>a:hover {
					color: @primary-color;
				}
			}
		}

		&.ant-menu-dark>.ant-menu-item:first-child {

			&>a,
			&>a:hover {
				color: rgba(255, 255, 255, 0.65);
			}

			&.ant-menu-item-selected {

				&>a,
				&>a:hover {
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}

	.item_title_font {
		padding-left: 20px;
		line-height: 36px;
		margin-bottom: 0px;
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #999999;
	}

	.item_title_font:hover {
		color: #4e89f8;
	}

	.item_children_div {
		width: calc(50% - 14px);
		line-height: 38px;
		display: block;
		height: 40px;
		font-size: 16px;
		margin: 5px 0px 5px 10px;
		background: #E9EDF6;
		/*border: 1px solid #CCCCCC;*/
		border: 1px dashed #CCCCCC;
		cursor: pointer;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.item_children_div:hover {
		background: #fcfcfc;
		color: #4e89f8;
		/*0709*/
		border: 1px dashed #4e89f8;

	}

	.item_children_div_select {
		width: calc(50% - 14px);
		line-height: 38px;
		display: block;
		height: 40px;
		font-size: 16px;
		margin: 5px 0px 5px 10px;
		border: 1px dashed #4e89f8;
		cursor: pointer;

		background: #fcfcfc;
		color: #4e89f8;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
<!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
